import React, { useState } from 'react';
import {
    Box,
    TextField,
    Button,
    Paper,
    Typography,
    Container,
    Alert
} from '@mui/material';
import { motion } from 'framer-motion';
import { Save as SaveIcon } from '@mui/icons-material';

const ModelForm = ({
    initialData = { name: '', description: '' },
    onSubmit,
    isLoading,
    error
}) => {
    const [formData, setFormData] = useState(initialData);
    const [validationErrors, setValidationErrors] = useState({});

    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData(prev => ({ ...prev, [name]: value }));

        // Clear validation error when field is filled
        if (value.trim() && validationErrors[name]) {
            setValidationErrors(prev => ({ ...prev, [name]: null }));
        }
    };

    const validate = () => {
        const errors = {};

        if (!formData.name.trim()) {
            errors.name = '请输入模型名称';
        }

        setValidationErrors(errors);
        return Object.keys(errors).length === 0;
    };

    const handleSubmit = (e) => {
        e.preventDefault();

        if (!validate()) return;

        // 调整要提交的数据，确保符合API期望格式
        const submitData = {
            name: formData.name.trim(),
            description: formData.description ? formData.description.trim() : ''
        };

        // 如果是编辑模式，保留ID
        if (initialData.id) {
            submitData.id = initialData.id;
        }

        // 如果有几何体数据，也包含它
        if (formData.geometry) {
            submitData.geometry = formData.geometry;
        }

        onSubmit(submitData);
    };

    return (
        <Container maxWidth="md">
            <Paper
                component={motion.div}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5 }}
                elevation={3}
                sx={{
                    p: 4,
                    borderRadius: 2,
                    mt: 4
                }}
            >
                <Typography variant="h5" component="h2" gutterBottom>
                    {initialData.id ? '编辑模型' : '创建新模型'}
                </Typography>

                {error && (
                    <Alert severity="error" sx={{ mb: 3 }}>
                        {error}
                    </Alert>
                )}

                <Box component="form" onSubmit={handleSubmit} noValidate>
                    <TextField
                        margin="normal"
                        required
                        fullWidth
                        id="name"
                        label="模型名称"
                        name="name"
                        autoFocus
                        value={formData.name}
                        onChange={handleChange}
                        error={!!validationErrors.name}
                        helperText={validationErrors.name}
                        sx={{ mb: 3 }}
                    />

                    <TextField
                        margin="normal"
                        fullWidth
                        id="description"
                        label="模型描述"
                        name="description"
                        multiline
                        rows={4}
                        value={formData.description || ''}
                        onChange={handleChange}
                        sx={{ mb: 3 }}
                    />

                    <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
                        <Button
                            component={motion.button}
                            whileTap={{ scale: 0.95 }}
                            type="submit"
                            variant="contained"
                            color="primary"
                            disabled={isLoading}
                            startIcon={<SaveIcon />}
                            sx={{ mt: 2, py: 1.5, px: 4 }}
                        >
                            {isLoading ? '保存中...' : '保存模型'}
                        </Button>
                    </Box>
                </Box>
            </Paper>
        </Container>
    );
};

export default ModelForm; 